<!DOCTYPE HTML>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
		<meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
		<link rel="stylesheet" type="text/css" href="../../css/style.css" />
		<style type="text/css">
			html,body{
				height:100%;
				background-color: #fff;
			}
			.case_box .top { padding: 15px 0;overflow-y: auto; z-index: 10;}
			.case_box div{ background-color: #fff;  }
			.case_box b{ display: block; padding:0 15px; font-size: 12px; font-weight: 400; color: #999; line-height: 30px;}
			.case_box .check {padding:0 15px;}
			.case_box .check li,.add_type li{ float:left; width: 33.33%; text-align: center; font-size: 13px; color: #333; line-height: 35px;}
			
			.case_box .check li:nth-child(3n+1){ text-align:left;}
			.case_box .check li:nth-child(3n){ text-align:right;}
			.case_box .check01 li{ width: 23%;}
			.case_box .check01 li:last-child{ text-align:right;}
			.case_box .check01 li:nth-child(3n){ text-align: center; }
			.case_box .check span,.add_type li span{ display:inline-block; vertical-align: top; height: 35px; padding-left: 20px; background: url(../../image/img_24.png) no-repeat left center; background-size: 15px auto;}
			.case_box .check span.on,.add_type li span.on{ background-image:url(../../image/img_25.png);}
			.case_box .check02{ padding:0 15px;}
			.case_box .check02 li,.add_long li{ float:left; width: 23.5%; margin-right: 2%;margin-bottom: 8px; text-align: center; font-size: 13px; color: #333; line-height: 28px; background-color: #f6f6f6; border-radius: 3px;}
			.case_box .check02 li:nth-child(4n+4),.add_long li:nth-child(4n+4){ margin-right: 0;}
			.case_box .check02 li.on,.add_long li.on{ background-color: #1c63fa; color: #fff;}
			.case_box .btn{ position:relative; height: 50px; margin-top:15px;}
			.case_box .btn::after{ position:absolute; content: ""; left: 0; top: 0; right: 0; border-top: 1px #d4d4d4 solid; transform: scaleY(0.5);}
			.case_box .btn::before{ position:absolute; content: ""; left: 50%; top: 0; bottom: 0; border-right: 1px #d4d4d4 solid; transform: scaleX(0.5);}
			.case_box .btn button{ display:block; float: left; border: 0; width: 50%; text-align: center; font-size: 15px; color: #333; height: 50px; background-color: transparent; border-radius: 0;}
			.case_box .btn button.on{ color:#1c63fa;}
			
			.sk-three-bounce {
			  margin: 0 auto;
			  width: 80px;
			  text-align: center; }
			  .sk-three-bounce .sk-child {
				width: 13.5px;
				height: 13.5px;
				background-color: #3262F1;
				border-radius: 100%;
				display: inline-block;
				-webkit-animation: sk-three-bounce 1.4s ease-in-out 0s infinite both;
						animation: sk-three-bounce 1.4s ease-in-out 0s infinite both; }
			  .sk-three-bounce .sk-bounce1 {
				-webkit-animation-delay: -0.32s;
						animation-delay: -0.32s; }
			  .sk-three-bounce .sk-bounce2 {
				-webkit-animation-delay: -0.16s;
						animation-delay: -0.16s; }

			@-webkit-keyframes sk-three-bounce {
			  0%, 80%, 100% {
				-webkit-transform: scale(0);
						transform: scale(0); }
			  40% {
				-webkit-transform: scale(1);
						transform: scale(1); } }

			@keyframes sk-three-bounce {
			  0%, 80%, 100% {
				-webkit-transform: scale(0);
						transform: scale(0); }
			  40% {
				-webkit-transform: scale(1);
						transform: scale(1); }
			}
			.more{ padding: 1.20rem 0; text-align: center; font-size: 0.26rem; color: #999; line-height: 0.60rem;}
			.display-none{ display:none; }
			.text-center { text-align: center !important; }
		</style>
	</head>
	<body>
		<div id="result">
		<div class="case_box">
			<div class="top">
				<b>装卸类型</b>
				<ul class="check clearfix" id="transporttypelist">
				</ul>
				<script id="transporttypelist_template" type="text/template">
				<li tapmode data-transporttype="0" onclick="selTransporttypetype(this);"><span{{ if (transporttype == 0) { }} class="on"{{ } }}>不限类型</span></li>
				{{ for (var i = 0, len = it.length; i < len; i++) { }}
				<li tapmode data-transporttype="{{=it[i].id}}" onclick="selTransporttypetype(this);"><span{{ if (it[i].id == transporttype) { }} class="on"{{ } }}>{{=it[i].transporttypeName}}</span></li>
				{{ } }}
				</script>
				<b>装卸时间</b>
				<ul class="check check01 clearfix" id="loadingtimelist">
				</ul>
				<script id="loadingtimelist_template" type="text/template">
				{{ for (var i = 0, len = it.length; i < len; i++) { }}
				<li tapmode data-loadingtime="{{=it[i].id}}" onclick="selTimetype(this);"><span{{ if (it[i].id == loadingtime) { }} class="on"{{ } }}>{{=it[i].loadingtimename}}</span></li>
				{{ } }}
				</script>
				<b>车长（可多选）</b>
				<ul class="check02 clearfix" id="carlenlist">
				</ul>
				<script id="carlenlist_template" type="text/template">
				<li tapmode data-carlen="0" onclick="selCarlen(this,1);" {{ if (checkcarlen(carlen,0)) { }}class="on"{{ } }}>不限</li>
				{{ for (var i = 0, len = it.length; i < len; i++) { }}		
				<li tapmode data-carlen="{{=it[i].id}}" {{ if (checkcarlen(carlen,it[i].id)) { }}class="on"{{ } }} onclick="selCarlen(this,0);">{{=it[i].carlenName}}</li>
				{{ } }}
				</script>
				<b>车型（可多选）</b>
				<ul class="check02 clearfix" id="cartypelist">
				</ul>
				<script id="cartypelist_template" type="text/template">
				<li tapmode data-cartype="0" onclick="selCartype(this,1);" {{ if (checkcarlen(cartype,0)) { }}class="on"{{ } }}>不限</li>
				{{ for (var i = 0, len = it.length; i < len; i++) { }}
				<li tapmode data-cartype="{{=it[i].id}}" {{ if (checkcarlen(cartype,it[i].id)) { }}class="on"{{ } }} onclick="selCartype(this,0);">{{=it[i].cartypeName}}</li>
				{{ } }}
				</script>
			</div>
		</div>
		<div class="s_fix case_box">
			<ul class="s_fix btn">
				<button tapmode="btnpress" onclick="resetTag();">重置</button>
				<button tapmode="btnpress" onclick="saveUserinfo();" class="on" class="on">确定</button>
			</ul>
		</div>
		</div>
	</body>
	<script type="text/javascript" src="../../script/api.js" ></script>
	<script type="text/javascript" src="../../script/app.js" ></script>
	<script type="text/javascript" src="../../script/doT.js"></script>
	<script type="text/javascript">
		var transporttype = 0; //用车类型
		var loadingtime = 0; //0不限
		var cartype = [0];
		var carlen = [0]; //车长
		
		var sendtype; //当前编辑类型
		var content; //当前提交内容
		var UILoading;
		apiready = function() {
			api.parseTapmode();
			UILoading = api.require('UILoading');
			$api.css($api.byId('result'), 'display: none');
			showloading();
			getJsonFromAPI();
			//点击空白处移除Frame
			api.addEventListener({
                name: 'navitembtn'
            }, function(ret, err) {
                if (ret.type == 'left') {
					api.closeWin({
					});
                }
            });
			api.addEventListener({
				name : 'reloadpage'
			}, function(ret, err) {
				getJsonFromAPI();				
			});
		}
		function checkcarlen(obj,id)
		{
			var res = false;
			id = parseInt(id);
			for(var item in obj)
			{
				if(parseInt(obj[item]) == id)
				{
					res = true;
					break;
				}
			}
			return res;
		}
		function saveUserinfo() {
			carlen = [];
			var liList = document.getElementById("carlenlist").children;
			for (var i = 0; i < liList.length; i++) {
				if($api.hasCls(liList[i], 'on'))
				{
					var curcarlen = parseInt($api.attr(liList[i],'data-carlen'));
					carlen.push(curcarlen);
				}
			}
			cartype = [];
			var liList1 = document.getElementById("cartypelist").children;
			for (var i = 0; i < liList1.length; i++) {
				if($api.hasCls(liList1[i], 'on'))
				{
					var curcartype = parseInt($api.attr(liList1[i],'data-cartype'));
					cartype.push(curcartype);
				}
			}
			content = {
				transporttype: transporttype,
				loadingtime: loadingtime,
				cartype: cartype,
				carlen: carlen
			};
			api.showProgress({
				title: '请稍后...',
				text: '正在保存',
				modal: true
			});
			api.getPrefs({
				key: 'user_info'
			}, function(ret, err) {
				if (ret && ret.value)
				{
					var userinfo = JSON.parse(ret.value);
					api.ajax({
						url: ApiUrl + '/v1/userinfo',
						method: 'post',
						cache: false,
						timeout: 10,
						headers: {
							authorization: kAppKey+';'+userinfo.access_token+';'+userinfo.uid
						},
						data: {
							values: {
								type: 'linesconf',
								content: content
							}
						}
					}, function(ret, err) {
						api.hideProgress();
						if (ret) {
							api.sendEvent({
								name : 'refreshcar'
							});
							api.alert({
								title: '提示',
								msg: '筛选条件设置成功！',
							}, function(ret, err) {
								if(ret.buttonIndex == 1)
								{
									api.closeWin({
									});
								}
							});
						} else {
							console.log(JSON.stringify(err));
							toast(err.body.error);
						}
						
					});
				}
			});
		}
		function saveConf() {
			//保存配置
			api.startPlay({
				path: 'widget://res/msg.mp3'
			}, function(ret, err) {
				if (ret) {
					//toast('播放完成');
				} else {
					//alert(JSON.stringify(err));
				}
			});
		}
		function resetTag() {
			//重置
			var liList = document.getElementById("transporttypelist").children;
			for (var i = 0; i < liList.length; i++) {
				$api.removeCls(liList[i].firstElementChild, 'on');
			}
			$api.addCls(liList[0].firstElementChild, 'on');
			liList = document.getElementById("loadingtimelist").children;
			for (var i = 0; i < liList.length; i++) {
				$api.removeCls(liList[i].firstElementChild, 'on');
			}
			$api.addCls(liList[0].firstElementChild, 'on');
			liList = document.getElementById("carlenlist").children;
			for (var i = 0; i < liList.length; i++) {
				$api.removeCls(liList[i], 'on');
			}
			$api.addCls(liList[0], 'on');
			liList = document.getElementById("cartypelist").children;
			for (var i = 0; i < liList.length; i++) {
				$api.removeCls(liList[i], 'on');
			}
			$api.addCls(liList[0], 'on');
			
		}
		function selTransporttypetype(obj) {
			document.activeElement.blur();
			transporttype = $api.attr(obj,'data-transporttype');
			var liList = document.getElementById("transporttypelist").children;
			for (var i = 0; i < liList.length; i++) {
				$api.removeCls(liList[i].firstElementChild, 'on')
			}
			$api.toggleCls(obj.firstElementChild,'on');
		}
		function selTimetype(obj) {
			document.activeElement.blur();
			loadingtime = $api.attr(obj,'data-loadingtime');
			var liList = document.getElementById("loadingtimelist").children;
			for (var i = 0; i < liList.length; i++) {
				$api.removeCls(liList[i].firstElementChild, 'on')
			}
			$api.toggleCls(obj.firstElementChild,'on');
		}
		function selCartype(obj,id) {
			document.activeElement.blur();
			if(id == 1)
			{
				var liList = document.getElementById("cartypelist").children;
				for (var i = 0; i < liList.length; i++) {
					$api.removeCls(liList[i], 'on')
				}
			}
			else
			{
				var liList = document.getElementById("cartypelist").children;
				$api.removeCls(liList[0], 'on')
			}
			$api.toggleCls(obj,'on');
		}
		function selCarlen(obj,id) {
			document.activeElement.blur();
			if(id == 1)
			{
				var liList = document.getElementById("carlenlist").children;
				for (var i = 0; i < liList.length; i++) {
					$api.removeCls(liList[i], 'on')
				}
				$api.val($api.byId('carlenother'),'');
			}
			else
			{
				var liList = document.getElementById("carlenlist").children;
				$api.removeCls(liList[0], 'on')
			}
			$api.toggleCls(obj,'on');
		}
		function getJsonFromAPI() {
			api.getPrefs({
				key: 'user_info'
			}, function(ret, err) {
				if (ret.value) {
					var userinfo = JSON.parse(ret.value);
					api.ajax({
						url: ApiUrl + '/v1/searchgoods',
						method: 'get',
						cache: false,
						timeout: 10,
						headers: {
							authorization: kAppKey+';'+userinfo.access_token+';'+userinfo.uid
						}
					}, function(ret, err) {
						hideloading();
						$api.css($api.byId('result'), 'display: block');
						if (ret) {
							if(ret.linesconf != '') {
								transporttype = ret.linesconf.transporttype;
								loadingtime = ret.linesconf.loadingtime;
								cartype = ret.linesconf.cartype;
								carlen = ret.linesconf.carlen;
							}
							var transporttypelist = ret.transporttypelist;
							UpdateList('transporttypelist','transporttypelist_template',transporttypelist,false);
							
							var loadingtimelist = [{id:0,loadingtimename:'不限'},{id:1,loadingtimename:'今天'},{id:2,loadingtimename:'明天'},{id:3,loadingtimename:'明天以后'}];
							UpdateList('loadingtimelist','loadingtimelist_template',loadingtimelist,false);
							
							var cartypelist = ret.cartypelist;
							UpdateList('cartypelist','cartypelist_template',cartypelist,true);
							
							var carlenlist = ret.carlenlist;
							UpdateList('carlenlist','carlenlist_template',carlenlist,true);
						} else {
							if(err.statusCode==402)
							{
								Relogin();
							}
							else
							{
								console.log(JSON.stringify(err));
								toast('网络异常');
							}
						}
					});
				}
			});
		}
		//渲染数据
		function UpdateList(domId,templateId,jsondata) {
			
			var act_content = $api.byId(domId);
			//act_content.innerHTML = '';
			$api.html(act_content,'');
			setTimeout(function() {
				var tempFn = doT.template($api.byId(templateId).innerHTML);
				var resultText = tempFn(jsondata);
				//act_content.innerHTML = resultText;
				$api.html(act_content, resultText);
				api.parseTapmode();
			}, 0);
			
		}
	</script>
</html>